---
import type { ImageMetadata } from 'astro'

type Props = {
    url: string,
    size: number,
    name: string,
    link: string,
    borderColor: string
}

const { url, size, name, link, borderColor } = Astro.props;
---

<div 
    class="not-content"
    style=`min-width: ${size}px; display: flex; flex-direction: column; align-items: center;`
>
    <img
        class="not-content"
        src={url}
        style={{
            resizeMode: 'cover',
            width: `${size}px`, 
            height: `${size}px`,
            borderRadius: '50%', 
            borderWidth: borderColor ? '4px' : '1px', 
            borderStyle: 'solid', 
            borderColor: borderColor || 'white'
        }}
    />
    <span>
        <a href={link} alt={name}>
            {name}
        </a>
    </span>
</div>
